<template>
	<div>
		<el-row justify="center">
		    <el-col :span="22">
				<el-input placeholder="请输入内容" v-model="quertdata"/>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" style="margin-left: 10px;" @click="query()">搜索</el-button>
			</el-col>
		</el-row>
		<el-row justify="center" style="margin-top: 10px;">
			<el-col :span="24">
				<el-carousel height="400px" v-if="showBanner"
				style="width: 100%;background-color: #cccccc;border-radius: 20px;overflow: hidden;">
				  <el-carousel-item v-for="(item,index) in banner" :key="index">
					<img :src="`${$ServerUrl}/api/public/showImg/${banner[index].picture}`" 
					style="width: 100%;height: 100%;">
				  </el-carousel-item>
				</el-carousel>
			</el-col>
		</el-row>
		<h6 class="class-title">好评最高5本书</h6>
		<el-row justify="center">
			<el-col :span="22">
				<ul class="book-box">
					<li class="book-item"
						v-for="item in findRate5" 
						:key="item.id" 
						@mouseenter="showID='2-'+item.id" @mouseleave="showID=0">
						<aside>
							<img :src="`${$ServerUrl}/api/public/showImg/${item.picture}`" >
						</aside>
						<label>{{item.name}}</label>
						<section @click="addCart(item.id)">
							<strong v-if="showID=='2-'+item.id">加入购物车</strong>
							<strong v-else>￥{{item.price}}</strong>
						</section>
					</li>
				</ul>
			</el-col>
		</el-row>
		<h6 class="class-title">好评最高5本书</h6>
		<el-row justify="center">
			<el-col :span="22">
				<ul class="book-box">
					<li class="book-item" 
						v-for="item in findSale5" 
						:key="item.id"
						@mouseenter="showID='3-'+item.id" @mouseleave="showID=0">
						<aside>
							<img :src="`${$ServerUrl}/api/public/showImg/${item.picture}`" >
						</aside>
						<label>{{item.name}}</label>
						<section @click="addCart(item.id)">
							<strong v-if="showID=='3-'+item.id">加入购物车</strong>
							<strong v-else>￥{{item.price}}</strong>
						</section>
					</li>
				</ul>
			</el-col>
		</el-row>
		<h6 class="class-title">好评最高5本书</h6>
		<el-row justify="center">
			<el-col :span="22">
				<ul class="book-box">
					<li class="book-item" 
						v-for="item in findFav5" 
						:key="item.id"
						@mouseenter="showID='1-'+item.id" @mouseleave="showID=0">
						<aside>
							<img :src="`${$ServerUrl}/api/public/showImg/${item.picture}`" >
						</aside>
						<label>{{item.name}}</label>
						<section @click="addCart(item.id)">
							<strong v-if="showID=='1-'+item.id">加入购物车</strong>
							<strong v-else>￥{{item.price}}</strong>
						</section>
					</li>
				</ul>
			</el-col>
		</el-row>
	</div>
</template>

<script>
var _this; 
import { ElMessage } from 'element-plus'
import {mapGetters} from 'vuex';
export default{
	name:'Main',
	data(){
		return {
			showBanner:false,
			quertdata:'',
			findRate5:[],
			findSale5:[],
			findFav5:[],
			banner:[],
			ban_index:0,
			showID:'0'
		}
	},
	computed:{
		...mapGetters(['hasOnline'])
	},
	created() {
		//获取轮播图
		_this = this;
		this.axios.get('/api/public/findHot/5/1').then((res)=>{
			this.banner = res.data.data;
			//延迟显示走马灯，解决打开该页面时轮播图显示空数据
			setTimeout(()=>{
				_this.showBanner = true;
			},10)
		}).catch((err)=>{
			//console.log(err);
		});
		//获取好评最高5本书
		this.axios.get('/api/public/book/findRate5').then((res)=>{
			this.findRate5 = res.data.data;
		}).catch((err)=>{
			//console.log(err);
		});
		//销量最高5本书
		this.axios.get('/api/public/book/findSale5').then((res)=>{
			this.findSale5 = res.data.data;
		}).catch((err)=>{
			//console.log(err);
		});
		//获取查询最高5本书
		this.axios.get('/api/public/book/findFav5').then((res)=>{
			this.findFav5 = res.data.data;
		}).catch((err)=>{
			//console.log(err);
		});
		
	},
	methods:{
		//添加到购物车
		addCart(id){
			//验证是否已登录
			if(!this.hasOnline){
				ElMessage.error({
					message: '添加失败,请先登录账户！'
				})
			}else{
				//提交数据
				this.axios.get('/api/public/addCart/'+id).then((res)=>{
					ElMessage({type:'success',message: res.data.msg})
				}).catch((err)=>{
					console.log(err)
				})
			}
		},
		query(){
			if(this.quertdata){
				//跳转到商品详情页查询
				this.$router.push({name:'details',query:{q:this.quertdata}})
			}
		}
	}
}
</script>

<style scoped>
*{padding: 0;margin: 0;list-style: none;}
.class-title{
	margin: 20px 0;
	font-size: 16px;
	color: mediumvioletred;
	padding-bottom: 15px;
	border-bottom: 2px solid #ff4500;
}
.book-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.book-item{
	margin: 20px 25px;
	min-width: 180px;
	max-width: 200px;
	width: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 10px #19324B;
	padding-bottom: 75px;
	position: relative;
}
.book-item aside{
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.book-item img{
	height: 90%;
	margin: 0 auto;
}
.book-item label{
	position: absolute;
	left: 5%;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	display: block;
	bottom: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-height: 25px;
	font-size: 15px;
	padding-bottom: 5px;
}
.book-item section{
	position: absolute;
	cursor: pointer;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #ffc6be;
	color: #ff0000;
}
.book-item section:hover{
	color: white;
	background-color: #ff5500;
}
</style>
